<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 文件上传</title>
<!--    element-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-upload
            class="upload-demo"
            ref="upload"
            action="/upload/file"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
    </el-upload>
</div>

</body>
</html>
<!--jquery-->
<script  scr="https://mystatic-1257827989.cos.ap-chengdu.myqcloud.com/jquery_js.js"></script>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--element-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let app =new Vue({
    el:'#app',
    data() {
        return {
            fileList: []
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        beforeAvatarUpload(file) {
           // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 5;

       /*     if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }*/
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 5MB!');
            }
            return isLt2M;
        },
        handlePreview(file) {
            console.log(file);
        }
    }
    });


</script>